<script>
import {
  defineComponent,
  reactive,
  onMounted,
  watch,
  ref,
  computed,
  inject,
  onBeforeMount,
  getCurrentInstance,
} from "vue";
//引入路由
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    //创建route
    const router = useRouter();
    const route = useRoute();
    const transitionName = ref("");
    const keepAliveNameList = ref([]);
    const keyIdex = computed(() => {
      return route.path + Math.random();
    });
    watch(
      () => router.currentRoute.value,
      (newValue, oldValue) => {
        if (oldValue.meta.index != undefined) {
          if (newValue.meta.index > oldValue.meta.index) {
            // 设置动画名称slide-left
            transitionName.value = "v";
          } else {
            transitionName.value = "v";
          }
        }
      }
    );
    return {
      keyIdex,
      transitionName,
      keepAliveNameList
    };
  },
};
</script>

<template>
  <router-view v-slot="{ Component }" :key="keyIdex">
    <transition :name="transitionName" mode="out-in" appear>
      <keep-alive :include="keepAliveNameList">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
  <!-- 底部 -->
  <footer-btn></footer-btn>
</template>

<style scoped>
</style>
